<<template>
  <div style="margin: 10px;">
   <el-card>
    <el-row :gutter="20">
        <el-col :span="6">
            <el-row class="bule">
                <el-col :span="12">
                    <div>
                        <el-image
                            style="width: 50px; height: 50px"
                            :src="require('@/assets/img/she.png')"
                            ></el-image>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div>48</div>
                    <div>设备总数</div>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span="6">
            <el-row class="green">
                <el-col :span="12">
                    <div>
                        <el-image
                            style="width: 50px; height: 50px"
                            :src="require('@/assets/img/zai1.png')"
                            ></el-image>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div>45</div>
                    <div>在线设备总数</div>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span="6">
            <el-row class="red">
                <el-col :span="12">
                    <div>
                        <el-image
                            style="width: 50px; height: 50px"
                            :src="require('@/assets/img/li1.png')"
                            ></el-image>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div>3</div>
                    <div>离线设备总数</div>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span="6">
            <el-row class="purple">
                <el-col :span="12">
                    <div>
                        <el-image
                            style="width: 50px; height: 50px"
                            :src="require('@/assets/img/guan.png')"
                            ></el-image>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div>93.75%</div>
                    <div>设备在线率</div>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
   </el-card>
    <el-row :gutter="20">
        <el-col :span="16">
           <el-card style="height: 350px;margin-top: 10px;">
            <el-row>
                <el-col :span="12">
                    <div class="title">时人流量统计</div>
                </el-col>
                <el-col :span="12">
                    <div class="title" style="float: right;">
                        <div style="margin-bottom: -6px;">
                            <el-radio-group v-model="radio1" size="mini">
                                <el-radio-button label="二楼餐厅厕所"></el-radio-button>
                                <!-- <el-radio-button label="7楼"></el-radio-button> -->
                                <!-- <el-radio-button label="8楼"></el-radio-button> -->
                                <!-- <el-radio-button label="9楼"></el-radio-button> -->
                            </el-radio-group>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <div style="border-bottom: 1px solid black;"></div>
            <div class="echartsCss" ref="echartsbox1">
                <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
            </div>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card style="height: 350px;margin-top: 10px;">
                <div class="title">告警列表</div>
            <div style="border-bottom: 1px solid black;"></div>
            <div>
                <el-row>
                    <el-col :span="8">
                        <div style="margin-bottom: 30px;margin-top: 10px;margin-left: 30px;">序号</div>
                        <div v-for="(item,i) in tabledata" :key="i">
                            <!-- <div :class="{'serial1':(item.serial==1),'serial2':(item.serial==2),'serial3':(item.serial==3),'serial4':(item.serial==4)}">{{ item.serial }}</div> -->
                            <div :class="item.serial==1?'serial1':item.serial==2?'serial2':item.serial==3?'serial3':'serial4'">{{ item.serial }}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="gaojing">告警信息</div>
                        <div v-for="(item,i) in tabledata" :key="i">
                            <div class="gaojing">{{ item.message }}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="gaojing">告警时间</div>
                        <div v-for="(item,i) in tabledata" :key="i">
                            <div class="gaojing">{{ item.date }}</div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            </el-card>
        </el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="8">
            <el-card style="height: 300px;margin-top: 10px;">
                <el-row>
                    <el-col :span="12">
                        <div class="title">紧急呼救数量统计</div>
                    </el-col>
                    <el-col :span="12">
                        <div class="title" style="float: right;">
                            <div style="margin-bottom: -6px;">
                                <el-radio-group v-model="radio2" size="mini">
                                    <el-radio-button label="二楼餐厅厕所"></el-radio-button>
                                    <!-- <el-radio-button label="7楼"></el-radio-button> -->
                                    <!-- <el-radio-button label="8楼"></el-radio-button> -->
                                    <!-- <el-radio-button label="9楼"></el-radio-button> -->
                                </el-radio-group>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            <div style="border-bottom: 1px solid black;"></div>
            <div class="echartsCss2" ref="echartsbox2">
                <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
            </div>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card style="height: 300px;margin-top: 10px;">
                <el-row>
                    <el-col :span="12">
                        <div class="title">厕位统计</div>
                    </el-col>
                    <el-col :span="12">
                        <div class="title" style="float: right;">
                            <div style="margin-bottom: -6px;">
                                <el-radio-group v-model="radio3" size="mini">
                                    <el-radio-button label="二楼餐厅厕所"></el-radio-button>
                                    <!-- <el-radio-button label="7楼"></el-radio-button> -->
                                    <!-- <el-radio-button label="8楼"></el-radio-button> -->
                                    <!-- <el-radio-button label="9楼"></el-radio-button> -->
                                </el-radio-group>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <div style="border-bottom: 1px solid black;"></div>
                <el-row>
                    <el-col :span="12">
                        <div style="text-align: center;margin-top: 10px;">
                            <el-image
                                style="width: 70px; height: 70px"
                                :src="require('@/assets/img/nan.png')"
                                ></el-image>
                        </div>
                        <div class="tongji">
                            男厕总数：3
                        </div>
                        <div class="tongji">
                            空闲总数：2
                        </div>
                        <div class="tongji">
                            有人总数：1
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div style="text-align: center;margin-top: 10px;">
                            <el-image
                                style="width: 70px; height: 70px"
                                :src="require('@/assets/img/nv.png')"
                                ></el-image>
                        </div>
                        <div class="tongji">
                            女厕总数：6
                        </div>
                        <div class="tongji">
                            空闲总数：6
                        </div>
                        <div class="tongji">
                            有人总数：0
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card style="height: 300px;margin-top: 10px;">
                <el-row>
                    <el-col :span="12">
                        <div class="title">空气质量</div>
                    </el-col>
                    <el-col :span="12">
                        <div class="title" style="float: right;">
                            <div style="margin-bottom: -6px;">
                                <el-radio-group v-model="radio4" size="mini">
                                    <el-radio-button label="二楼餐厅厕所"></el-radio-button>
                                    <!-- <el-radio-button label="7楼"></el-radio-button> -->
                                    <!-- <el-radio-button label="8楼"></el-radio-button> -->
                                    <!-- <el-radio-button label="9楼"></el-radio-button> -->
                                </el-radio-group>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <div style="border-bottom: 1px solid black;"></div>
                <el-row>
                    <el-col :span="12">
                        <div style="text-align: center;margin-top: 10px;">
                            <el-image
                                style="width: 70px; height: 70px"
                                :src="require('@/assets/img/nan.png')"
                                ></el-image>
                        </div>
                        <div class="tongji">
                            男厕NS：0.01
                        </div>
                        <div class="tongji">
                            男厕NH：0.00
                        </div>
                        <div class="tongji">
                            男厕空气质量：<span style="color: #00ff00;">优</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div style="text-align: center;margin-top: 10px;font-size: 13px;">
                            <el-image
                                style="width: 70px; height: 70px"
                                :src="require('@/assets/img/nv.png')"
                                ></el-image>
                        </div>
                        <div class="tongji">
                            女厕NS：0.01
                        </div>
                        <div class="tongji">
                            女厕NH：0.00
                        </div>
                        <div class="tongji">
                            女厕空气质量：<span style="color: #00ff00;">优</span>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
        radio1:'二楼餐厅厕所',
        radio2:'二楼餐厅厕所',
        radio3:'二楼餐厅厕所',
        radio4:'二楼餐厅厕所',
        tabledata:[{
            serial:'1',
            message:'二楼餐厅厕所NS超标',
            date:'2023-01-29 09:33:44'
        },{
            serial:'2',
            message:'二楼餐厅厕所NS超标',
            date:'2023-01-29 09:30:44'
        },
        {
            serial:'3',
            message:'二楼餐厅厕所NS超标',
            date:'2023-01-29 09:33:44'
        },{
            serial:'4',
            message:'二楼餐厅厕所NS超标',
            date:'2023-01-29 09:30:44'
        }]
    }
  },
  created () {
  },
  mounted () {
    this.renliutongjiecharts()
    this.hujiuecharts()
  },
  methods: {
    renliutongjiecharts(){
        var echartsbox1=this.$refs.echartsbox1;
		  let myChart = this.$echarts.getInstanceByDom(
		    this.$refs.echartsbox1
		  );
		  if (myChart == null) {
		    myChart = this.$echarts.init(echartsbox1);
		  }
		  
		  var option;
          option = {
            color:['#ff0066','#663366'],
            title: {
                // text: 'Stacked Line'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: [ '女厕', '男厕']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['0点', '1点', '2点', '3点', '4点', '5点', '6点', '7点', '8点', '9点', '10点',]
            },
            yAxis: {
                type: 'value',
                axisLine:{
                        show:true //显示y轴
                },
            },
            series: [
                {
                name: '女厕',
                type: 'line',
                stack: '女',
                smooth: true,
                data: [0, 0, 0, 0, 0, 0, 0,5,11,21,6]
                },
                {
                name: '男厕',
                type: 'line',
                stack: '男',
                smooth: true,
                data: [0, 0, 0, 0, 0, 0, 0,6,14,20,10]
                }
            ]
        };
        option && myChart.setOption(option);
    },
    hujiuecharts(){
        var echartsbox2=this.$refs.echartsbox2;
		  let myChart = this.$echarts.getInstanceByDom(
		    this.$refs.echartsbox2
		  );
		  if (myChart == null) {
		    myChart = this.$echarts.init(echartsbox2);
		  }
		  
		  var option;
          option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
                
            },
            series: [
                {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                center:['50%','60%'],
                data: [
                { value: 1, name: '男厕' },
                { value: 1, name: '女厕' }
                ],
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label:{
                    formatter:function(data){
                        //显示数量、百分比
                        return `${data.name}\n ${data.value}(${data.percent.toFixed(1)}%)`
                        //加上\n就是换行显示                
                        //return `${data.name} ${data.value}\n(${data.percent.toFixed(1)}%)`
                    }
                    }
                }
            ]
        };
        option && myChart.setOption(option);
    }
  },
}
</script>
<style lang="scss" scoped>
.bule{
    height: 70px;
    padding: 10px;
    border-radius: 4px;
    background: linear-gradient(to right, #33ffff, #33ccff);
    color: white;
}
.green{
    height: 70px;
    padding: 10px;
    border-radius: 4px;
    background: linear-gradient(to right, #33ff99, #33cc99);
    color: white;
}
.red{
    height: 70px;
    padding: 10px;
    border-radius: 4px;
    background: linear-gradient(to right, #ff9966, #ff6666);
    color: white;
}
.purple{
    height: 70px;
    padding: 10px;
    border-radius: 4px;
    background: linear-gradient(to right, #99ccff, #9999ff);
    color: white;
}
.tongji{
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
}
.title{
    padding: 10px;
    // border-bottom: 1px solid black;
}
.serial1{
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 50%;
    text-align: center;
    color: white;
    margin-bottom: 30px;
    margin-top: 10px;
    margin-left: 30px;
    width: 16px;
    height: 16px;
    font-size: 11px;
}
.serial2{
    width: 20px;
    height: 20px;
    background-color: yellow;
    border-radius: 50%;
    text-align: center;
    margin-bottom: 30px;
    color: white;
    margin-left: 30px;
    width: 16px;
    height: 16px;
    font-size: 12px;
}
.serial3{
    width: 20px;
    height: 20px;
    background-color: #3399ff;
    border-radius: 50%;
    text-align: center;
    margin-bottom: 30px;
    color: white;
    margin-left: 30px;
    width: 16px;
    height: 16px;
    font-size: 12px;
}
.serial4{
    width: 16px;
    height: 16px;
    font-size: 12px;
    background-color: #66cccc;
    border-radius: 50%;
    text-align: center;
    margin-bottom: 30px;
    color: white;
    margin-left: 30px;
}
.gaojing{
    // text-align: center;
    margin-bottom: 30px;
    margin-top: 10px;
    font-size: 13px;
}
.echartsCss{
    width: 100%;
    height: 280px;
}
.echartsCss2{
    width: 100%;
    height: 250px;
}
</style>
